<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue.js"></script>
</head>

<body>
    <div class="div">
        <!-- 可以把表达式写内联上也可以把方法写内联上 -->
        {{con}}
        <!-- 表达式 -->
        <div @click="con++">点我加1</div>
        <div @click="cons">点我加1----</div>
        <ul>
            <!-- 方法 -->
            <!-- 第一种写法 -->
            <li @click="hg">胡歌</li><br>
            <!-- 第2种写法 可以传参 （最强大） -->
            <li @click="pyy(1,2,$event)">彭于晏</li><br>
            <button type="button" @click="(e)=>nming(1,2,3,e)">匿名函数，也可以传参</button>
        </ul>

    </div>
    <script>
        const obj = {
            data() {
                return {
                    con: 0
                }
            },
            methods: {
                // 用方法加1
                cons() {
                    //    console.log('dj');
                    this.con++
                },
                // 不用传参的 没有括号的有e.target属性
                hg(e) {
                    console.log("胡歌");
                    console.log(e.target);
                },
                // 写了括号但没传参
                pyy(a, b, e) {
                    console.log("彭于晏");
                    console.log(a, b);
                    // 必须在括号里写 $event (要一样) 才有这个事件对象属性
                    console.log(e.target);
                },
                // 匿名函数
                nming(a, b, c, d) {
                    console.log('匿名函数执行');
                    console.log(a, b, c);
                    console.log(d.target);
                }
            }
        }
        Vue.createApp(obj).mount('.div')
    </script>
</body>

</html>